<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="baidu_union_verify" content="04fb99021834ed020db83746ed947945" />
    <title>CLCW_APP_API测试</title>
    <link rel="shortcut icon" href="favicon.ico" >
    <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<script type="text/javascript">
    //请求的数据及格式
    var APIs={},sfm=null,content=null;
    APIs['请选择']={api:''};
    /*
    APIs['sign/apply']={
        api_title:'申请访问key'
        ,api:'sign/apply'
        ,method:{options:['get','post'],default:'get'}
        //,method:'post'
        ,data:{
            uuid:{des:'uuid',type:'text',default:'uuid12345678'}
            ,xx:{des:'xx',type:'text',default:'xxx'}
            ,'p1':{des:'参数1',options:['1111','2222'],default:'2222'}
            ,'p2':{des:'参数2',radios:['值1','值2'],default:'值2'}
            ,'p3':{des:'参数3',checkboxs:['值1','值2'],default:'值2'}
        }
        ,api_comment:'申请访问key'
    };

    APIs['test/router']={
        api_title:'路由测试'
        ,api:'test/router'
        ,method:'post'
        ,data:{}
        ,api_comment:'API访问路由测试<br/>正确返回200即正常'
    };*/
    APIs['Demo/index']={
        api_title:'申请访问key'
        ,api:'Demo/index'
        ,method:{options:['get','post'],default:'get'}
        //,method:'post'
        ,data:{            
            'clcw_exception':{des:'clcw_exception',checkboxs:['值1'],default:'1'}
            ,'exception':{des:'exception',checkboxs:['值1'],default:'1'}
            ,'api_200':{des:'api_200',checkboxs:['值1'],default:'1'}
        }
        ,api_comment:'申请访问key'
    };

    APIs['Inbox/get_list']={
        api_title:'消息模块接口'
        ,api:'Inbox/get_list'
        ,method:{options:['get','post'],default:'get'}
        //,method:'post'
        ,data:{
            uuid:{des:'uuid',type:'text',default:'uuid12345678'}
            ,xx:{des:'xx',type:'text',default:'xxx'}
            ,'p1':{des:'参数1',options:['1111','2222'],default:'2222'}
            ,'p2':{des:'参数2',radios:['值1','值2'],default:'值2'}
            ,'p3':{des:'参数3',checkboxs:['值1','值2'],default:'值2'}
        }
        ,api_comment:'申请访问key'
    };

    //api参数解析
    var attrParser={
        api:function(attVal){
            $(sfm).attr('action',''+attVal);
        }
        ,method:function(val){
             if(typeof val == 'object' && val.options.length>0){
                 var html = 'http请求方法：<select onchange="$(sfm).attr(\'method\',this.value);"><option value="" ></option> ';
                 $.each(val.options,function(i,n){
                    html+='<option '+(n==val.default?'selected':'')+' value='+n+' > '+n+'</option>';
                    if(n==val.default) $(sfm).attr('method',n);
                 });
                 $('#method').html(html+'</select><b/>');
             }else{
                $(sfm).attr('method',val);
             }
         }
        ,api_title:function(val){
            $('#api_title').html(val);
        }
        ,api_comment:function(val){
            $('#api_comment').html(val);
        }
        ,data:function(val){
            var html = '';
            $.each(val,function(i,n){
                if(n['options']){
                    html += '<li class="tl">'+n.des+'：</li><li><select name="'+i+'"><option value="" ></option>';
                    $.each(n['options'],function(i1,n1){
                        html+='<option '+(n1==n.default?'selected':'')+' value='+n1+' > '+n1+'</option>';
                    });
                    html += '</select></li>';
                    html += '<br/>';
                }else if(n['radios'] || n['checkboxs']){
                    var type = (n['checkboxs']?'checkbox':'radio');
                    var ls = n['radios'];
                    if(type == 'checkbox') ls = n['checkboxs'];
                    html += '<li class="tl">'+n.des+'：</li><li>';
                    $.each(ls,function(i1,n1){
                        html+='<input type="'+type+'" name="'+i+'" '+(n1==n.default?'checked':'')+' value='+n1+' > '+n1+'</option>';
                    });
                    html += '</li><br/>';
                }else if(n['type']=='text'){
                    html += '<li class="tl">'+n.des+':'+'</li><li><input name="'+i+'" value="'+ n.default+'" /></li><br/>';
                }
            });
            content.html(html);
        }
    };
    function changeApi(){
        var val = this.value;
        $.each(APIs[val],function(i,n){
            if(attrParser[i]){
                attrParser[i](n);
            }
            else{
                attrParser['default'](n);
            }
        });
    };
    //初始化
    $(function(){
        $('#apisel').change(changeApi);
        var html='';
        $.each(APIs,function(i,n){
            html += "<option title='"+ n.api_title+"' value='"+i+"'>"+i+"</option>";
        });
        $('#apisel').html(html);
        sfm = $('#fm');
        content = $('#content');
    });
</script>
<style>
    div{ float: left; width: 30%; height:500px; padding: 5px; border: 1px solid;}
    li{width: 45%; float: left; margin-left: -10px;list-style:none;}
    .tl{ text-align: right; margin-right: 10px;}
</style>
<div>
    选择API:<select id="apisel" ></select> <span id="api_title"></span>
    <p id="method"></p>
    <form target="subFm" id="fm">
        <p><ul id="content"></ul></p>
        <p style=" margin-right:30px;float: right;"><input type="submit" value="发送请求"/></p>
    </form>
</div>
<div style="width: 10%;">
    <span>接口说明:</span><br/>
    <p id="api_comment"></p>
</div>
<div style="width: 50%;">
    <span>返回结果:</span><br/>
    <iframe name="subFm" style="width:100%; height:95%;"></iframe>
</div>
</body>
</html>